<html>
<head>
    <!-- Import Tempo -->
    <script type="text/javascript" src="../tempo.min.js"></script>

    <!-- This example uses jQuery's ajax() method to retrieve data from Twitter -->
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script>
        var data = [
            {"type":'java', "name":'guice'},
            {"type":'javascript', "name":'jQuery'},
            {"type":'java', "name":'guice', "owner":'Google'},
            {"type":'php', "name":'django'}
        ];

        $(document).ready(
                setTimeout(function () {
                    var tempo = Tempo.prepare($('ul'), {}, function (template) {
                        var i = 0;

                        template.when(TempoEvent.Types.RENDER_STARTING,function (event) {
                            $(event.element).before('<h2>Before</h2>');

                        }).when(TempoEvent.Types.ITEM_RENDER_STARTING,function (event) {
                                    if (event.item.type == 'javascript') {
                                        event.item.name += ' is fun!';
                                    }
                                    event.item.even = i++ % 2 ? 'even' : 'odd';

                                }).when(TempoEvent.Types.RENDER_COMPLETE,function (event) {
                                            $(event.element).after('<h2>After</h2>');

                                        }).render(data);
                    });
                }, 2500)
        );
    </script>
    <style>
        li {
            padding: 10px;
        }

        li.even {
            background-color: #ddd;
        }
    </style>
</head>
<body>
<h1>Preprocessing</h1>

<pre>
    var data = [
                {"type":'java', "name":'guice'},
                {"type":'javascript', "name":'jQuery'},
                {"type":'java', "name":'guice', "owner":'Google'},
                {"type":'php', "name":'django'}
            ];
</pre>

<ul>
    <li data-template-fallback>{{name}}...rendering soon!</li>
    <li data-template class="{{even}}" style="display: none;">{{name}}</li>
</ul>

</body>
</html>